<template lang="">
    <div class="box" >
       <div class="box" ref="box"></div>
    </div>
</template>
<script>
import * as echarts from "echarts"
export default {
    data() {
        return {

        }
    },
    mounted() {
        this.echar()
    },
    methods: {
        echar() {
            let mychart = echarts.init(this.$refs.box)
            let mycolor=['#1089e7','#f57474','#56d0e3','#f7e0ba','#8a76f5']
            let option = {
                
                title: {
                    text: '主要疫情国家治愈率',
                    textAlign: "center",
                    left: '50%',
                    textStyle: {
                        color: '#fff'
                    }
                },
               
                xAxis: {
                    type: 'value',
                    splitLine:{
                        show:false
                    },
                    axisLabel:{
                        show:false
                    }
                },
                yAxis: [
                {
                    type: "category",
                    data: ['美国', '西班牙', '哥伦比亚', '英国', '意大利'],
                    inverse :true,
                    labelStyle:{
                       color:'#fff'
                    },
                    axisLine:{
                        show:false
                    },
                    splitLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        color:"#FFF"
                    }
                },
                {
                    type: "category",
                    // data: ['美国', '西班牙', '哥伦比亚', '英国', '意大利'],
                    inverse :true,
                    axisLine:{
                        show:false
                    },
                    splitLine:{
                        show:false
                    },
                    axisTick:{
                        show:false
                    },
                    axisLabel:{
                        show:false
                    }

                },
                ],
                grid:{
                  left:75,
                  bottom:35,
                },
                series: [
                    {
                        type: 'bar',
                        yAxisIndex:0,
                        data: [
                            { name: '美国', value: 77.7 },
                            { name: '西班牙', value: 88.1 },
                            { name: '哥伦比亚', value: 92.6 },
                            { name: '英国', value: 10.4 },
                            { name: '意大利', value: 13.3 }
                        ], 
                        barWidth:10,
                        label:{
                         show:true,
                         color:'#fff',
                         formatter:'{c}%'
                        },
                        itemStyle:{
                            borderRadius:15,
                            color:function(res){
                                return mycolor[res.dataIndex]
                            }
                        }
                    },
                    {
                        type: 'bar',
                        yAxisIndex:1,
                        data: [
                            { name: '美国', value: 100 },
                            { name: '西班牙', value: 100 },
                            { name: '哥伦比亚', value: 100 },
                            { name: '英国', value: 100 },
                            { name: '意大利', value: 100 }
                        ], 
                        barWidth:15,
                        itemStyle:{
                            borderRadius:15,
                            color:'none',
                            borderColor:'#00a8c9',
                            borderWidth:2
                            
                            }
                        }
                ]
            }
            mychart.setOption(option)
        }
    }
}
</script>
<style lang="less" scoped>
.box {
    width: 400px;
    height: 220px;
    // border: 1px solid #000;
}
</style>